<script setup>
import {onBeforeMount, onMounted, shallowRef} from "vue";
import {useDark, useToggle} from "@vueuse/core/index";
import MyIcon from "@/components/MyIcon.vue";
import MyConfirm from "@/components/MyConfirm";
import {MINIO_HOST} from "@/const";
import MyList from "@/components/MyList";
import router from "@/router";
import {ElMessage} from "element-plus";
import {useStore} from "vuex"

let vuex = useStore();
/* ==================== onMounted ==================== */

onBeforeMount(()=>{
  /* ==================== 登录保护 ==================== */
  if (!vuex.state['loginFlag']) {
    ElMessage.warning('请先登录');
    setTimeout(function () {
      router.push('/');
    }, 2000);
  }
})

/* ==================== 权限菜单 ==================== */

// 当前选中权限的index值
let currentMenuIndex = shallowRef('/DashBoard');
// 左侧权限列表是否折叠
const isCollapse = shallowRef(false);
// 当前登录的会员的权限列表
const permissions = formatPermissions(JSON.parse(sessionStorage.getItem('permissions')));

console.log(JSON.parse(sessionStorage.getItem('permissions')))

/*
* [
*   {id: 1, name: '111', pid: 0},
*   {id: 2, name: '111', pid: 0},
*   {id: 3, name: '111', pid: 1},
*   {id: 4, name: '111', pid: 1},
* ]
*
* [
*   {id: 1, name: '111', pid: 0, sub: [
*      {id: 3, name: '111', pid: 1},
*      {id: 4, name: '111', pid: 1},
*   ]},
*   {id: 2, name: '111', pid: 0},
* ]
*
* */
function formatPermissions(permissions) {
  let fuPermissions = [];
  let ziPermissions = [];
  for (let i in permissions) {
    let permission = permissions[i];
    if (permission['pid'] === 0) {
      permission['subPermissions'] = [];
      fuPermissions.push(permission);
    } else {
      ziPermissions.push(permission)
    }
  }
  for (let i in ziPermissions) {
    for (let j in fuPermissions) {
      if (ziPermissions[i]['pid'] === fuPermissions[j]['id']) {
        fuPermissions[j]['subPermissions'].push(ziPermissions[i]);
        break;
      }
    }
  }
  return fuPermissions;
}

/* ==================== 系统日历 ==================== */

// 抽屉
const calendarDrawer = shallowRef();
// 当前时间
let now = shallowRef(new Date());
// 打开抽屉
function openCalendarDrawer() {
  calendarDrawer.value = true;
}

/* ==================== 项目信息 ==================== */

//抽屉
const projectInfoDrawer = shallowRef();
// 打开抽屉
function openProjectInfoDrawer() {
  projectInfoDrawer.value = true;
}
//列表项
let projectInfoItems = [
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
  {'type': '', 'label': '项目名称', 'value': 'MyV=Club后台管理子系统'},
];

/* ==================== 退出登录 ==================== */

//退出登录:清空sessionStorage + 更新登录状态 + 成功提示 + 跳入登录页面
function logout() {
  sessionStorage.clear();
  vuex.dispatch('srtLoginFlag', false);
  ElMessage.success('登出成功');
  router.push('/');
}

/* ==================== onMounted ==================== */

// 根据localStorage判断，当前是否正在使用暗黑模式
const currentTheme = shallowRef(localStorage.getItem('vueuse-color-scheme') === 'auto')
// 切换暗黑模式和默认模式
const toggleTheme = useToggle(useDark());

/* ==================== 员工信息 ==================== */

//当前登录的员工信息
const emp = JSON.parse(sessionStorage.getItem('emp'));
//当前登录的员工头像
let avatar = MINIO_HOST + '/test/' + emp['avatar'];
const empInfoDrawer = shallowRef();
function openempInfoDrawer() {
  empInfoDrawer.value = ture;
}
</script>

<template>
  <el-container class="main-body">
    <el-aside class="main-body-left" width="collapse" max-width="200px">
      <el-menu class="permissions-menu el-menu-vertical-demo" unique-opened router
               :collapse="isCollapse"
               :default-active="currentMenuIndex">
        <el-image class="logo" :src="require('../assets/image/颜色的十六进制.jpg')"/>
        <!--DashBoard-->
        <el-menu-item class="house-item" index="/DashBoard" title="回到后台项目首页">
          <template #title>
            <my-icon icon="House" label="DashBoard"/>
          </template>
        </el-menu-item>

        <!--遍历父权限-->
        <el-sub-menu class="permissions"
                     v-for="(permission, i) in permissions" :key="permission['id']"
                     :index="i.toString()" :title="permission['info']">
          <template #title>
            <my-icon :icon="permission['icon']" :label="permission['title']"/>
          </template>
          <!--遍历子权限-->
          <el-menu-item class="sub-permissions"
                        v-for="subPermission in permission['subPermissions']" :key="subPermission['id']"
                        :index="subPermission['url']" :title="subPermission['info']">
            <my-icon :icon="subPermission['icon']" :label="subPermission['title']"/>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container class="main-body-right">
      <el-header class="main-body-right-head">
        <el-row class="is-align-middle">
          <el-col class="fold-expand" :span="2">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="!isCollapse">
                <my-icon size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>
              </el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col class="project-title" :span="7">
            <h2>MyClub后台管理子系统</h2>
          </el-col>
          <el-col class="operation-btn" :span="6" :offset="7">
            <el-divider direction="vertical"/>
            <el-button icon="search" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="bell" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="list" title="项目信息" size="small" round @click="openProjectInfoDrawer"/>
            <el-button icon="calendar" title="系统时间" size="small" round @click="openCalendarDrawer"/>
            <el-divider direction="vertical"/>
            <el-switch class="theme-switch" v-model="currentTheme" @change="toggleTheme()" inline-prompt
                       title="开启暗黑模式"/>
            <el-divider direction="vertical"/>
          </el-col>
          <el-col class="emp-avatar" :span="2">
            <el-avatar class="avatar-img" :size="45" :src="avatar"
                       @click="()=>ElMessage.warning('暂未开发！')"/>
          </el-col>
          <el-col class="logout" :span="1">
            <my-confirm title="确定登出账号？" @confirm="logout" label="EXIT"/>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
      <el-main class="main-body-right-main">
        <router-view/>
        </el-main>
    <!--日历抽屉-->
    <el-drawer title="当前时间" v-model="calendarDrawer" size="50%">
      <el-calendar v-model="now"/>
    </el-drawer>
    <!--下拉抽屉-->
    <el-drawer title="项目信息" v-model="projectInfoDrawer" size="50%">
      <my-list :items="projectInfoItems"/>
    </el-drawer>
  </el-container>
</template>

<style scoped lang="scss">
.main-body-left {

  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框

  .logo {
    padding: 10px; // 内边距
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }

  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}

.main-body-right-head {

  .avatar-img {
    margin: 10px; // 外边距
    outline: 1px solid white; // 边框
    border: 1px solid white; // 边框
  }
}
</style>